<script setup>
import AppChat from '@/components/app-chat/app-chat.vue'
import {ref} from 'vue'

//聊天弹出层状态
const showChat = ref(false)
</script>

<template>
  <div class="main">
    <el-container>
      <!-- 顶部 -->
      <el-header>
        <app-header @chat="showChat = true"/>
      </el-header>

      <!-- 内容 -->
      <el-container>
        <!-- 边栏 -->
        <el-aside width="200px">
          <app-menu/>
        </el-aside>

        <!-- 内容 -->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>

  <el-dialog v-model="showChat" width="70%" title="客服沟通" center destroy-on-close>
    <app-chat/>
  </el-dialog>
</template>

<style lang="scss" scoped>
.main {
  height: 100%;
  @include grid-box;
}

.el-header {
  @include grid-box;
  align-items: center;
  border-bottom: 1px $divider solid;
}

.el-main {
  max-height: calc(100vh - 60px);
  background: $light-bg;
}
</style>
